<template>
	<view class="container">
		<my-tabs :tabList="tabList" :pageNum="4" @tabChange="tabChange"></my-tabs>
		<view class="order-list" v-if="tableData.length">
			<view class="order-item" v-for="(item, index) in tableData" @tap="navTo('/pages/order/order_detail?orderId=' + item.orderId)">
				<view class="top-row flex-x-bet-y-center">
					<view class="teacher-info flex-y-center">
						<image :src="item.teacher.avatar | formatFile" mode="" class="avatar"></image>
						<view class="">
							<view class="nickname">{{item.teacher.nickName}}</view>
							<view class="tags flex">
								<view class="tag" v-for="(tag, index) in item.teacherTags">{{tag}}</view>
							</view>
						</view>
					</view>
					<view class="row-right">
						<view class="status-text" :class="{cancel: item.status == 3}">{{item.statusText}}</view>
						<view class="residue-text" v-if="item.status == 1">
							剩余 
							<text style="color:#EC1328;">{{item.expireTimeStr}}</text>
							后自动取消
						</view>
					</view>
				</view>
				<view class="center-row flex-x-bet-y-center">
					<view class="category-hour">
						<view>{{item.courseTag.courseTagName}}，{{item.choosedLessonNum || 0}}/{{item.lessonNum || 0}}节</view>
						<view class="create-time">{{item.createTime}}</view>
					</view>
					<view class="price">￥{{item.payPrice}}</view>
				</view>
				<view class="bottom-btns">
					<view class="btn" v-if="item.status == 1" @tap.stop="cancelOrder(item)">取消订单</view>
					<view class="btn submit_btn" v-if="item.status == 1" @tap.stop="orderPay(item)">去支付</view>
					<view class="btn submit_btn" v-if="item.status == 2 && (item.lessonNum > item.choosedLessonNum)" @tap="chooseLesson(item)">去选课</view>
					<view class="btn" v-if="item.status == 3" @tap.stop="delOrder(item)">删除</view>
				</view>
			</view>
			<my-loadmore :currentStep="loadingStep"></my-loadmore>
		</view>
		<my-empty :isShow="!tableData.length" emptyText="暂无订单"></my-empty>
	</view>
</template>

<script>
	let that = null;
	import { getOrderList, cancelOrder, delOrder, orderPay } from '@/api/common.js'
	import { getCountdownTime } from '@/utils/utils.js'
	export default {
		data() {
			return {
				tabList:[
					{name: '全部', status: ''},
					{name: '待支付', status: '1'},
					{name: '已购买', status: '2'},
					{name: '已取消', status: '3'}
				],
				timer: '',
			};
		},
		onLoad(){
			that = this;
			this.getOrderList()
		},
		onUnload(){
			uni.$off('refresh')
		},
		onShow(){
			uni.$on('refresh', () => {
				uni.$off('refresh')
				if(this.timer) {
					return 
				}
				this.timer = setTimeout(() => {
					const queryStatus = this.queryParams.status || ''
					this.initQuery()
					this.queryParams.status = queryStatus;
					that.getOrderList()
					clearTimeout(this.timer)
					this.timer = ''
				}, 200)
			})
		},
		methods:{
			getOrderList(){
				this.queryList(getOrderList, data => {
					data.forEach(item => {
						// 显示剩余支付时间
						if(item.expireTime && item.expireTime > 0){
							item.expireTime += 3
							item.expireTimeStr = "00:00:00";
							item.timer = setInterval(() => {
								item.expireTime--
								const countDown = getCountdownTime(item.expireTime)
								item.expireTimeStr = countDown.h + ':' + countDown.m + ':' + countDown.s
								if(item.expireTime < 1){
									clearInterval(item.timer)
									item.timer = null;
									item.status = 3
									item.statusText = '已取消'
								}
							}, 1000)
						}
					})
				})
			},
			cancelOrder(orderInfo){
				this.$refs.modal.open({
					content: '确认取消订单？',
					success: () => {
						cancelOrder(orderInfo.orderId).then(res => {
							this.tableData.forEach(item => {
								if(item.timer){
									clearInterval(item.timer)
									item.timer = null
								}
							})
							// 
							this.toast('取消成功')
							const queryStatus = this.queryParams.status || ''
							this.initQuery()
							this.queryParams.status = queryStatus;
							this.getOrderList()
						})
					}
				})
			},
			delOrder(orderInfo){
				this.$refs.modal.open({
					content: '确认删除订单？',
					success: () => {
						delOrder(orderInfo.orderId).then(res => {
							this.tableData.forEach(item => {
								if(item.timer){
									clearInterval(item.timer)
									item.timer = null
								}
							})
							// 
							this.toast('删除成功')
							const queryStatus = this.queryParams.status || ''
							this.initQuery()
							this.queryParams.status = queryStatus;
							this.getOrderList()
						})
					}
				})
			},
			orderPay(orderInfo){
				orderPay(orderInfo.orderId).then(result => {
					uni.requestPayment({
					  timeStamp: result.data.timeStamp,
					  nonceStr: result.data.nonceStr,
					  package: result.data.packageVal,
					  signType: result.data.signType,
					  paySign: result.data.paySign,
						
					  success: (res) => {
					    uni.hideLoading({})
							this.tableData.forEach(item => {
								if(item.timer){
									clearInterval(item.timer)
									item.timer = null
								}
							})
							this.toast('支付成功')
							const queryStatus = this.queryParams.status || ''
							this.initQuery()
							this.queryParams.status = queryStatus;
							this.getOrderList()
					  },
					  fail: function (err) {
							this.toast('支付失败');
					  },
					  complete: function () {}
					});
				}).catch(err => {
					
				})
			},
			chooseLesson(orderInfo){
				this.$store.commit('order/SET_LESSONNUM', {lessonNum: orderInfo.lessonNum})
				this.$store.commit('order/SET_TEACHERID', orderInfo.teacherId)
				this.navTo('/pages/teacher/choose_time?orderId=' + orderInfo.orderId)
			},
			tabChange(e){
				this.initQuery()
				this.queryParams.status = e.status
				this.getOrderList()
			}
		}
	}
</script>

<style lang="scss">
	.container{
		background-color: #F3F3F3;
		
		.order-list{
			margin: 30rpx;
			
			.order-item{
				padding: 30rpx;
				background: #FFFFFF;
				border-radius: 26rpx;
				margin-bottom: 30rpx;
				
				.top-row{
					padding-bottom: 25rpx;
					border-bottom: 1rpx solid #F3F3F3;
					
					.teacher-info{
						
						.avatar{
							width: 92rpx;
							height: 92rpx;
							margin-right: 30rpx;
							border-radius: 50%;
						}
						
						.nickname{
							font-size: 32rpx;
							font-weight: bold;
							color: #333333;
						}
						
						.tags{
							display: flex;
							flex-wrap: wrap;
							max-width: 200rpx;
							
							.tag{
								margin-top: 15rpx;
								margin-right: 10rpx;
								padding: 4rpx 10rpx;
								background-color: $theme-color;
								font-size: 24rpx;
								color: #fff;
								border-radius: 6rpx;
								margin-right: 10rpx;
							}
						}
					}
					
					
					.row-right{
						display: flex;
						flex-direction: column;
						align-self: flex-start;
						
						.status-text{
							text-align: right;
							font-size: 28rpx;
							font-family: PingFang SC;
							font-weight: 500;
							color: $theme-color;
						}	
						
						.cancel{
							color: gray;
						}
						
						.residue-text{
							text-align: right;
							font-size: 26rpx;
							font-family: PingFang SC;
							font-weight: 500;
							color: #333333;
							padding-top: 20rpx;
						}
					}
					
				}
			
				.center-row{
					padding: 35rpx 0;
					
					.category-hour{
						font-size: 28rpx;
						font-family: PingFang SC;
						font-weight: bold;
						color: #333333;
					}
					
					.create-time{
						font-size: 26rpx;
						font-weight: 500;
						color: #ACACAC;
						padding-top: 15rpx;
					}
					
					.price{
						align-self: flex-start;
						font-size: 34rpx;
						font-weight: 800;
						color: #EC1328;
					}
				}
			
				.bottom-btns{
					display: flex;
					justify-content: flex-end;
					align-items: center;
					
					.btn{
						display: flex;
						justify-content: center;
						align-items: center;
						width: 186rpx;
						height: 68rpx;
						background: #F8F9FB;
						border-radius: 34rpx;
						font-size: 30rpx;
						font-weight: 500;
						color: #333333;
						margin-left: 30rpx;
					}
					
					.submit_btn{
						background-color: $theme-color;
						color: #fff;
					}
					
				}
			}
		}
	}
</style>
